<template>
  <div class="menuTree">
    <div class="title_box">
      <div class="title">菜单结构</div>
      <el-button type="primary" @click="add">新增</el-button>
    </div>
    <div class="tree_list">
      <el-tree accordion :current-node-key="defaultCheck" node-key="id" :default-expanded-keys="defaultShowNodes"
        highlight-current :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
    </div>
    <LsdDialog @handleBtn="onActionClick" :dialogConfig="dialogConfig" @close="close(dialogConfig)">
      <DialogForm v-if="dialogConfig.isShow" @handleNodeClick="handlTree" slot="dialog" ref="formTasking"
        :formConfig="formConfig" />
    </LsdDialog>
  </div>
</template>

<script>
import { menuTree, menuAdd } from "@/api/SystemConfig/menuConfig.js";
export default {
  components: {},
  props: {
    menuType: {
      type: String
    }
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "menuName"
      },
      defaultShowNodes: [1],
      defaultCheck: 1,
      dialogConfig: {
        title: "菜单新增",
        isShow: false,
        type: "",
        btnList: [
          {
            name: "确定",
            type: "primary",
            id: "submit",
            size: "mini"
          },
          {
            name: "取消",
            id: "cancel",
            size: "mini"
          }
        ],
        width: "40%"
      },
      formConfig: {
        formData: [
          {
            type: "selectTree",
            label: "上级菜单",
            prop: "superMenu",
            name: "superMenuId",
            keyWord: "keyWords",
            treeRef: "treeRef",
            clickClose: true,
            commonClick: true,
            title: "上级菜单选择",
            choose: false,
            ref: "tree_select",
            multiple: false,
            lableWidth: "140px",
            class: "sjgy",
            option: [],
            treeData: {
              data: [],
              checked: [],
              props: {
                children: "children",
                label: "menuName",
                value: "id"
              }
            }
          },
          {
            label: "菜单名称",
            type: "input",
            prop: "menuName",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单路径",
            type: "input",
            prop: "menuUrl",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "菜单编码",
            type: "input",
            prop: "menuCode",
            class: "sjgy",
            lableWidth: "140px"
          },
          {
            label: "排序",
            type: "number",
            prop: "sort",
            class: "sjgy",
            min: 0,
            lableWidth: "140px"
          },
          {
            type: "select",
            label: "菜单类型",
            prop: "menuType",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "1",
                label: "系统内部菜单"
              },
              {
                value: "2",
                label: "外部集成菜单"
              }
            ]
          },
          {
            type: "select",
            label: "下级样式",
            prop: "direct",
            // name: "orgType",
            lableWidth: "140px",
            class: "sjgy",
            option: [
              {
                value: "transverse",
                label: "横向"
              },
              {
                value: "1",
                label: "竖向"
              }
            ]
          }
        ],
        rules: {
          superMenu: [
            { required: true, message: "请选择上级菜单", trigger: "blur" }
          ],
          menuName: [
            { required: true, message: "请输入菜单名称", trigger: "blur" }
          ],
          menuUrl: [
            { required: true, message: "请输入菜单路径", trigger: "blur" }
          ],
          direct: [
            { required: true, message: "请选择下级样式", trigger: "blur" }
          ]
        }
      }
    };
  },
  computed: {},
  watch: {
    "menuType": {
      handler(val) {
        console.log(val, "--val");
        if (val) {
          this.getMenuTree(val);
          if (val === "2") {
            this.$set(this, "defaultCheck", 1551952588570656);
            this.$set(this, "defaultShowNodes", [1551952588570656]);
          } else {
            this.$set(this, "defaultCheck", 1);
            this.$set(this, "defaultShowNodes", [1]);
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getMenuTree();
  },
  methods: {
    // 获取菜单结构树
    async getMenuTree(type) {
      const res = await menuTree();
      let result = Object.assign([], res);
      if (type === "1") {
        // pc端
        result[0].children = res[0].children.filter(i => !["PC端", "APP端", "运维端", "test"].includes(i.menuName));
        this.data = result;
        this.formConfig.formData.forEach(i => {
          if (i.label === "上级菜单") {
            i.treeData.data = result;
          }
        });
        this.$emit("handleTree", { ...this.data[0].children[0] }, this.menuType);
      } else if (type === "2") {
        // app端
        result = res[0].children.filter(i => ["APP端"].includes(i.menuName));
        this.data = result;
        this.formConfig.formData.forEach(i => {
          if (i.label === "上级菜单") {
            i.treeData.data = result;
          }
        });
        this.$emit("handleTree", { ...this.data[0].children[0] }, this.menuType);
      }
    },
    onActionClick(item) {
      this[item.id]();
    },
    // 菜单新增
    add() {
      if (this.menuType === "1") {
        this.formConfig = {
          formData: [
            {
              type: "selectTree",
              label: "上级菜单",
              prop: "superMenu",
              name: "superMenuId",
              keyWord: "keyWords",
              treeRef: "treeRef",
              clickClose: true,
              commonClick: true,
              title: "上级菜单选择",
              choose: false,
              ref: "tree_select",
              multiple: false,
              lableWidth: "140px",
              class: "sjgy",
              option: [],
              treeData: {
                data: [],
                checked: [],
                props: {
                  children: "children",
                  label: "menuName",
                  value: "id"
                }
              }
            },
            {
              label: "菜单名称",
              type: "input",
              prop: "menuName",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单路径",
              type: "input",
              prop: "menuUrl",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单编码",
              type: "input",
              prop: "menuCode",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "排序",
              type: "number",
              prop: "sort",
              class: "sjgy",
              min: 0,
              lableWidth: "140px"
            },
            {
              type: "select",
              label: "菜单类型",
              prop: "menuType",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "1",
                  label: "系统内部菜单"
                },
                {
                  value: "2",
                  label: "外部集成菜单"
                }
              ]
            },
            {
              type: "select",
              label: "下级样式",
              prop: "direct",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "transverse",
                  label: "横向"
                },
                {
                  value: "1",
                  label: "竖向"
                }
              ]
            }
          ],
          rules: {
            superMenu: [
              { required: true, message: "请选择上级菜单", trigger: "blur" }
            ],
            menuName: [
              { required: true, message: "请输入菜单名称", trigger: "blur" }
            ],
            menuUrl: [
              { required: true, message: "请输入菜单路径", trigger: "blur" }
            ],
            direct: [
              { required: true, message: "请选择下级样式", trigger: "blur" }
            ]
          }
        };
      } else {
        this.formConfig = {
          formData: [
            {
              type: "selectTree",
              label: "上级菜单",
              prop: "superMenu",
              name: "superMenuId",
              keyWord: "keyWords",
              treeRef: "treeRef",
              clickClose: true,
              commonClick: true,
              title: "上级菜单选择",
              choose: false,
              ref: "tree_select",
              multiple: false,
              lableWidth: "140px",
              class: "sjgy",
              option: [],
              treeData: {
                data: [],
                checked: [],
                props: {
                  children: "children",
                  label: "menuName",
                  value: "id"
                }
              }
            },
            {
              label: "菜单名称",
              type: "input",
              prop: "menuName",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单路径",
              type: "input",
              prop: "menuUrl",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单编码",
              type: "input",
              prop: "menuCode",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "菜单图片路径",
              type: "input",
              prop: "menuIcon",
              class: "sjgy",
              lableWidth: "140px"
            },
            {
              label: "排序",
              type: "number",
              prop: "sort",
              class: "sjgy",
              min: 0,
              lableWidth: "140px"
            },
            {
              type: "select",
              label: "菜单类型",
              prop: "menuType",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "1",
                  label: "系统内部菜单"
                },
                {
                  value: "2",
                  label: "外部集成菜单"
                }
              ]
            },
            {
              type: "select",
              label: "下级样式",
              prop: "direct",
              // name: "orgType",
              lableWidth: "140px",
              class: "sjgy",
              option: [
                {
                  value: "transverse",
                  label: "横向"
                },
                {
                  value: "1",
                  label: "竖向"
                }
              ]
            }
          ],
          rules: {
            superMenu: [
              { required: true, message: "请选择上级菜单", trigger: "blur" }
            ],
            menuName: [
              { required: true, message: "请输入菜单名称", trigger: "blur" }
            ],
            menuUrl: [
              { required: true, message: "请输入菜单路径", trigger: "blur" }
            ],
            menuIcon: [
              { required: true, message: "请输入菜单图片路径", trigger: "blur" }
            ],
            direct: [
              { required: true, message: "请选择下级样式", trigger: "blur" }
            ]
          }
        };

      }
      this.dialogConfig.isShow = true;
      this.$nextTick(() => {
        this.getMenuTree(this.menuType);
      });
    },
    // 结构树点击事件
    handleNodeClick(data, node, item) {
      this.$emit("handleTree", data, this.menuType);
    },
    close(val) {
      val.show = false;
    },
    // 菜单新增菜单树点击事件
    handlTree(item, nowId, index, data, node) {
      this.checkMenuName(data, node);
    },
    // 递归判断当前menuUrl
    checkMenuName(data, node) {
      if (!data.pid) {
        this.$set(this.$refs.formTasking.form, "parent", data.id);
      } else {
        if (!node.parent.data.pid) {
          this.$set(this.$refs.formTasking.form, "parent", data.id);
        } else {
          this.checkMenuName(node.parent.data, node.parent);
        }
      }
      console.log(this.$refs.formTasking.form.menuUrl, "---menuNmae");
    },
    // 新增菜单确认按钮
    async submit() {
      try {
        this.$refs.formTasking.isValidate();
        const flag = this.$refs.formTasking.flag || false;
        const params = {
          ...this.$refs.formTasking.form,
          pid: this.$refs.formTasking.form.superMenuId
        };
        if (flag) {
          const res = await menuAdd(params);
          if (res) {
            this.getMenuTree();
            this.dialogConfig.isShow = false;
            this.$message({
              message: "添加成功!",
              type: "success"
            });
          }
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.menuTree {
  width: 100%;
  height: 100%;
  border: 1px solid #eee;
  box-sizing: border-box;

  .title_box {
    width: 100%;
    height: 8%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;

    .title {
      font-size: 20px;
      font-weight: 600;
      color: #1890ff;
    }
  }

  .tree_list {
    padding: 20px;
    height: 86%;
    // flex: 1;
    overflow: scroll;
  }

  :deep(.el-dialog) {
    height: 55% !important;
  }
}

:deep(.el-tree-node__label) {
  font-size: 16px;
  // font-weight: 600;
  color: #303133;
}

:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background-color: #e6f7ff;
  color: #1890ff;
}

:deep(.el-form-item) {
  justify-content: center;
}

:deep(.el-form-item__content) {
  flex: 1;
}

:deep(.el-select) {
  width: 80%;
}

:deep(.el-input) {
  width: 80%;
}
</style>
